<template>
  <div ref="dom" class="charts chart-map"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import '../../../js/world' // 引入组件
import '../../../js/china' // 引入组件
// import 'echarts/map/js/china' // 引入组件
import mapData from '../data/map.json'
import liudongData from '../data/liudong.json'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
import worldImg from '../images/world.png'
import backImg from '../images/back.jpg'
import topImg from '../images/charity_top.png'
import * as d3 from 'd3';

// echarts.registerTheme('tdTheme', tdTheme)

export default {
  name: 'ChartWorldMap3D',
  props: {
    value: Array,
    max: String,
    title: Object,
    subtext: String,
    legend: Object,
    series: Array
  },
  // watch: {
  //   value: {
  //     deep: true,
  //     handler (val) {
  //       this.intChart()
  //     }
  //   }
  // },
  data () {
    return {
      dom: null,
      config:{
        color: '#0b45e8',
        levels: 1,
        intensity: 4,
        threshold: 0.01
      }
    }
  },
  mounted() {
    console.log(1111)
    var canvas = document.createElement('canvas');
    canvas.width = 1920;
    canvas.height = 1080;
    var context = canvas.getContext("2d");
    
    context.lineWidth = 0.5;
    context.strokeStyle = this.config.color;
    context.fillStyle = this.config.color;
    context.shadowColor = this.config.color;
    var that = this;

    this.image(worldImg).then(function(image) {
	        var m = image.height,
	            n = image.width,
	            values = new Array(n * m),
	            contours = d3.contours().size([n, m]).smooth(true),
	            projection = d3.geoIdentity().scale(canvas.width / n),
	            path = d3.geoPath(projection, context);
	
	        //   StackBlur.R(image, 5);
	
	        for (var j = 0, k = 0; j < m; ++j) {
	            for (var i = 0; i < n; ++i, ++k) {
	            values[k] = image.data[(k << 2)] / 255;
	            }
	        }
	
	        var opt = {
	            image: canvas
	        }
	
          var results = [];
          
	        function update(threshold, levels) {
	            context.clearRect(0, 0, canvas.width, canvas.height);
	            var thresholds = [];
	            for (var i = 0; i < levels; i++) {
	                thresholds.push((threshold + 1 / levels * i) % 1);
	            }
	            results = contours.thresholds(thresholds)(values);
	            redraw();
	        }

	        function redraw() {
	            results.forEach(function (d, idx) {
	                context.beginPath();
	                path(d);
	                context.globalAlpha = 1;
	                context.stroke();
	                if (idx > that.config.levels / 5 * 3) {
	                    context.globalAlpha = 0.01;
	                    context.fill();
	                }
	            });
	            opt.onupdate();
	        }
	        d3.timer(function(t) {
	            var threshold = (t % 10000) / 10000;
	            update(threshold, 1);
	        });
	
	        that.intChart(opt);
	
          update(that.config.threshold, that.config.levels);
    })
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    image(url) {
        return new Promise(function(resolve) {
            var image = new Image();
            image.src = url;
            image.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = image.width / 8;
            canvas.height = image.height / 8;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            resolve(context.getImageData(0, 0, canvas.width, canvas.height));
            };
        });
    },
    intChart (opt) {
	  var data = liudongData['15-16'],
	  	  newData = []
      for (var i=0; i<data.length; i++) {
		  if (mapData['geoCoordMap'][data[i][0]]!=undefined && mapData['geoCoordMap'][data[i][1]]!=undefined) {
				newData.push({
					from:data[i][0],
					to:data[i][1],
					coords: [
						mapData['geoCoordMap'][data[i][0]],
						mapData['geoCoordMap'][data[i][1]],
					],
					value: data[i][2],
					visualMap: false
				})
			} 
	  }

	  console.log(newData)

      var that = this; 
      this.dom = echarts.init(this.$refs.dom)
			let canvas2 = document.createElement('canvas');
			let mapChart = echarts.init(canvas2, null, {
			    width: 1920,
			    height: 1080
			});
			
			
      var contourChart = echarts.init(document.createElement('canvas'), null, {
          width: 1920,
          height: 1080
      });
	
      var img = new echarts.graphic.Image({
          style: {
              image: opt.image,
              x: -1,
              y: -1,
              width: opt.image.width + 2,
              height: opt.image.height + 2
          }
      });
      contourChart.getZr().add(img);
	
      opt.onupdate = function () {
          img.dirty();
      };
	
			mapChart.setOption({
			    series: [{
			        type: 'map',
			        map: 'world',
			        // 绘制完整尺寸的 echarts 实例
			        top: 0,
			        left: 0,
			        right: 0,
			        bottom: 0,
			        boundingCoords: [
			            [-180, 90],
			            [180, -90]
			        ]
			    }]
			});
				var canvas1 = document.createElement('canvas');
				var mapChart1 = echarts.init(canvas1, null, {
				    width: 1920,
			    	height: 1080
				});
				mapChart1.setOption({
				    backgroundColor: 'transparent',
				    series: [{
				        type: 'map',
				        map: 'china',
				        left: 0,
				        top: 0,
				        right: 0,
				        bottom: 0,
				        //   environment: '#000',
				        boundingCoords: [
				            [-180, 90],
				            [180, -90]
				        ],
				        label: {
				            normal: {
				                show: false,
				                fontSize: 4,
				                lineHeigh: 4,
				                color: '#000',
				
				            }
				        },
				        itemStyle: {
				            normal: {
				                areaColor: 'transparent',
				                borderWidth: 1,
				
				                borderType: 'solid',
				                borderColor: '#a85000'
				            }
				        },
				
				    }]
				});		
		
			var option = {
			    title: {
//			        text: '点击地球获取该区域地图',
			        textStyle: {
			            color: '#fff'
			        }
			    },
			    tooltip: {
			        show: true
			    },
	//		    visualMap: [{
	//		        // show: false,
	//		        type: 'continuous',
	//		        seriesIndex: 0,
	//		        text: ['scatter3D'],
	//		        textStyle: {
	//		            color: '#fff'
	//		        },
	//		        calculable: true,
	//		        max: 3000,
	//		        inRange: {
	//		            color: ['#87aa66', '#eba438', '#d94d4c']
	//		        }
	//		    }],
			    globe: {
            //   bottom:'10%',
	//		        baseTexture: mapChart,
	//			    environment:'none',//背景
              // environment:topImg,
              heightTexture: backImg,
              baseTexture: worldImg,
			        shading: 'lambert',
			        light: { // 光照阴影
			            main: {
			                color: 'blue', // 光照颜色
			                intensity: 14.2, // 光照强度
			                shadowQuality: 'ultra', //阴影亮度
			                shadow: true, // 是否显示阴影
			                alpha: 40,
			                beta: -30
			            },
			            ambient: {
			                intensity: 4.6
			            }
			        },
			        viewControl: {
			            alpha: 30,
			            beta: 160,
//			            targetCoord: [116.46, 39.92],
			            autoRotate: true,
			            autoRotateAfterStill: 10,
			            distance: 240,
			            autoRotateSpeed:4
			        },
			        postEffect: {//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
		                enable: true, //是否开启
		                SSAO: {//环境光遮蔽
		                    radius: 1,//环境光遮蔽的采样半径。半径越大效果越自然
		                    intensity: 1,//环境光遮蔽的强度
		                    enable: true
		                }
		            },

	                layers: [{
	                    type: 'blend',
	                    blendTo: 'emission',
	                    texture: contourChart,
	                    intensity: that.config.intensity
	                }]
			    },
			    series: [{
			        name: 'lines3D',
			        type: 'lines3D',
			        coordinateSystem: 'globe',
			        // effect: {
			        //     show: true,
			        //     period: 2,
			        //     trailWidth: 3,
			        //     trailLength: 0.5,
			        //     trailOpacity: 1,
			        //     trailColor: '#0087f4'
			        // },
			        // blendMode: 'lighter',
			        // lineStyle: {
			        //     width: 1,
			        //     color: '#0087f4',
			        //     opacity: 0.2
					// },
					effect: {
						show: true,
						trailWidth: 2,
						trailLength: 0.2
					},

					blendMode: 'lighter',

					lineStyle: {
						width: 0,
						color: 'rgb(146,139,49)',
						opacity: 0.2
					},
			        data: newData,
	//		        data: [{
	//		            from: 'A',
	//		            to: 'B',
	//		            coords: [
	//		                [-83.69501541554166, -75.76453333240994],
	//						[105.18, 37.51]
	//		            ],
	//		            value:"2013.48"
	//		        }, {
	//		            from: 'A',
	//		            to: 'C',
	//		            coords: [
	//		                [118.377173, 31.337123],
	//		                [105.18, 37.51]
	//		            ],
	//		            value:"2013.48"
	//		        }],
			        silent: false
			    },{ //点
			        name: '景区',
	//		        type: 'effectScatter',
	//		        coordinateSystem: 'bmap',
			        type: 'scatter3D',
			        blendMode: 'lighter',
					coordinateSystem: 'globe',
					showEffectOn: 'render',
			        zlevel: 2,
			        effectType:"ripple", 
			        symbolSize: 15,
			        rippleEffect: {
			            period: 4,
			            scale: 4,
			            brushType: 'fill'
			        },
		            
	//		        showEffectOn: 'hover',
			        hoverAnimation: true,
			        label: {
			            normal: {
			                show: true,
			                position: 'right',
//			                formatter: '{b}',
							formatter:function(params){
								if(params.dataIndex == 1){
									return '南京'
								}else if(params.dataIndex == 2){
									return '沈阳'
								}else if(params.dataIndex == 3){
									return '太原'
								}else if(params.dataIndex == 4){
									return '日本'
								}else if(params.dataIndex == 5){
									return '雅加达'
								}else if(params.dataIndex == 0){
									return '徐州'
								}else if(params.dataIndex == 6){
									return '昆明'
								}
							},
			                textStyle: {
			                    fontSize: 18,
			                    color: '#f5d909',
			                    fontWeight:'bold',
//			                    backgroundColor:'rgba(255,255,255,0.2)'
								backgroundColor:'transparent'
			                }
			            }
			        },
			        itemStyle: {
			            normal: {
			                color: 'rgb(29,183,255)'
			            }
			        },
	//		        data: [{
	//		            'name': 'A',
	//		            'value': [105.18, 37.51, 1500]
	//		        }, {
	//		            'name': 'B',
	//		            'value': [118.393252, 31.15576, 1500]
	//		        }, {
	//		            'name': 'C',
	//		            'value': [117.989662, 31.293115, 1500]
	//		        }]
					data:[
						// [117.11, 34.15],
						// [118.58, 32.01],
						// [123.38, 41.8],
						// [112.01, 38.01],
						// [139.46, 35.42],
						// [116.58, 6.10],
						// [102.90, 25.31]
					]
	
	    		}]
			}
        this.dom.setOption(option, true)
        // this.dom.off('click')
        // this.dom.on('click', function(params) {//设置点击事件
        //     window.open("/data_list")
		    // })
        on(window, 'resize', this.resize)
    }
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
